<template>
  <el-card
    class="box-card"
    style="margin-right: 20px;margin-left: 20px;  text-align: center;background-color:#f2efe8"
  >
    <div>
      <div style="display: flex; flex-direction: row;">
        <div align="center" style="margin-top:5px;margin-left: 20%;width: 50%;">
          <el-input
            placeholder="输入要搜索失物关键字"
            type="text"
            suffix-icon="el-icon-search"
            @change.native="lost"
            v-model="content"
          ></el-input>
          <!--v-model省略了-->
        </div>
        <div style="margin-top: 5px;">
          <el-button type="button" @click="dialogFormVisible = true"
            >发布寻物启事</el-button
          >
          <div style="text-align: left;">
            <el-dialog
              title="物品信息"
              :visible.sync="dialogFormVisible"
              top="10px"
            >
              <el-form :model="lGoodsForm" :rules="rules">
                <el-form-item
                  label="丢失物品名称"
                  :label-width="formLabelWidth"
                  prop="lname"
                  :rules="rules.lname"
                >
                  <el-input
                    v-model="lGoodsForm.lname"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="丢失地点"
                  :label-width="formLabelWidth"
                  prop="lplace"
                  :rules="rules.lplace"
                >
                  <el-input
                    v-model="lGoodsForm.lplace"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="丢失时间"
                  :label-width="formLabelWidth"
                  prop="ldate"
                  :rules="rules.ldate"
                >
                  <el-input
                    v-model="lGoodsForm.ldate"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="失主信息"
                  :label-width="formLabelWidth"
                  prop="lpeople"
                  :rules="rules.lpeople"
                >
                  <el-input
                    v-model="lGoodsForm.lpeople"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="失主联系方式"
                  :label-width="formLabelWidth"
                  prop="lcontact"
                  :rules="rules.lcontact"
                >
                  <el-input
                    v-model="lGoodsForm.lcontact"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="丢失物品描述"
                  :label-width="formLabelWidth"
                  prop="linformation"
                  :rules="rules.linformation"
                >
                  <el-input
                    type="textarea"
                    v-model="lGoodsForm.linformation"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="上传相关图片"
                  :label-width="formLabelWidth"
                >
                  <div>
                    <el-upload
                      action="http://localhost:8888/imageLoad"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="handle_success"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="50%" :src="dialogImageUrl" alt="插入图片" />
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="send">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>

    <div v-if="list[0] == null">
      <el-empty description="无匹配物品"></el-empty>
    </div>

    <el-row :gutter="20">
      <div v-for="(list, index) in list" :key="index">
        <el-col :span="12" style="position:relative;" class="animated fadeInUp">
          <div class="ding">
            <img src="../assets/image/ding.png" alt="" />
          </div>
          <el-card class="box-card" style="margin: 10px;">
            <div>
              <div style="display: flex; flex-direction: row;height:300px" class="item">
                <div style="margin-right: 10px;padding:15px;">
                  <el-image
                    :src="list.lurl"
                    fit="fill"
                    style="height: 250px;width: 250px"
                  ></el-image>
                </div>

                <div style=" width: 300px">
                  <div style="margin-left: 30px;margin-top:30px;" class="wenzi">
                    <div style="text-align: left;">
                      <font size="3"
                        ><b>丢失物名称：{{ list.lname }}</b></font
                      >
                    </div>
                    <div style="text-align: left;">
                      <font size="3"
                        ><b>丢失地点：{{ list.lplace }}</b></font
                      >
                    </div>
                    <div style="text-align: left;">
                      <font size="3"
                        ><b>丢失时间：{{ list.ldate }}</b></font
                      >
                    </div>
                    <div style="text-align: left;">
                      <font size="3"
                        ><b>失主信息：{{ list.lpeople }}</b></font
                      >
                    </div>
                    <div style="text-align: left;">
                      <font size="3"
                        ><b>失主联系方式：{{ list.lcontact }}</b></font
                      >
                    </div>
                    <div style="text-align: left;">
                      <font size="3"
                        ><b>丢失物描述：{{ list.linformation }}</b></font
                      >
                    </div>
                    <div style="text-align: right; margin-top: 50px">
                      <font size="2">{{ list.ltime }}</font>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </div>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          lno: 1,
          lname: "书本",
          lplace: "图书馆",
          ldate: "2021年12月12日",
          lpeople: "谭繁荣",
          lcontact: "123456",
          linformation: "计算机组成原理",
          ltime: "",
          lurl: "",
        },
      ],
      content: null,
      dialogFormVisible: false,
      lGoodsForm: {
        lname: "",
        lplace: "",
        ldate: "",
        lpeople: "",
        lcontact: "",
        linformation: "",
      },
      formLabelWidth: "120px",
      dialogImageUrl: "",
      dialogVisible: false,
      file: "",
      filelist: [
        {
          url: "",
        },
      ],
      rules: {
        lname: [
          { required: true, message: "请输入丢失物名称", trigger: "blur" },
        ],
        lplace: [
          { required: false, message: "请输入拾到地点", trigger: "blur" },
        ],
        ldate: [{ required: false, message: "", trigger: "blur" }],
        lpeople: [
          { required: true, message: "请输入失主信息", trigger: "blur" },
        ],
        lcontact: [
          { required: true, message: "请输入失主联系方式", trigger: "blur" },
        ],
        linformation: [{ required: false, message: "", trigger: "" }],
      },
    };
  },
  created() {
    this.$http
      .get("http://localhost:8888/findAllLgood")
      .then((res) => {
        this.list = res.data;
        console.log(res);
      })
      .catch(function(err) {
        console.log(err);
      });
  },
  methods: {
    lost() {
      this.$http
        .post("http://localhost:8888/findLgood", { lname: this.content })
        .then((res) => {
          this.list = res.data;
          console.log(res);
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    handleRemove(file, fileList) {
      fileList.add(file);
      console.log(file, fileList);
      this.$message.success("图片删除");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handle_success(res) {
      this.$message.success("图片上传成功");
      this.file = res;
    },
    send() {
      this.$http
        .post("http://localhost:8888/addLgood", {
          lurl: this.file,
          lname: this.lGoodsForm.lname,
          lplace: this.lGoodsForm.lplace,
          ldate: this.lGoodsForm.ldate,
          lpeople: this.lGoodsForm.lpeople,
          lcontact: this.lGoodsForm.lcontact,
          linformation: this.lGoodsForm.linformation,
        })
        .then((res) => {
          this.list = res.data;
        })
        .catch(function(err) {
          console.log(err);
        });
      this.dialogFormVisible = false;
      this.$message.success("发布成功等待管理员的审核");
    },
    collect(id, state) {
      if (state != 0) {
        this.$http
          .post("http://localhost:8888/updateState", { lno: id, lstore: state })
          .then((res) => {
            this.list = res.data;
            console.log(res);
          })
          .catch(function(err) {
            console.log(err);
          });
      } else {
        this.$http
          .post("http://localhost:8888/updateState", { lno: id, lstore: state })
          .then((res) => {
            this.list = res.data;
            console.log(res);
          })
          .catch(function(err) {
            console.log(err);
          });
      }
    },
  },
};
</script>

<style scoped>
.red {
  color: red;
}
.normal {
  color: black;
}
.fontcolor {
  color: rgb(65, 64, 64);
}
.time {
  text-align: right;
  margin-top: 50px;
  color: rgb(94, 92, 92);
  margin-right: 8px;
}
.wenzi div {
  margin-bottom: 8px;
  color: black !important;
}
.ding {
  position: absolute;
  top: -11px;
  right: -2px;
  z-index: 10;
}
</style>
